.profile-scroll {
  & {
    width: 100%;
    height: 100%;
  }

  // 弹窗样式
  .popup {

    /* 弹窗总体样式 */
    .popupStyle {
      & {
        display: flex;
        width: 100%;
        height: 100%;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;
        background-color: #FEFEFE;
        flex-direction: column;
        align-items: center;
      }

      .top-box {
        & {
          display: flex;
          flex-direction: row;
          width: 92%;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.2rem;
          height: 0.3rem;
        }

        .close {
          width: 0.2rem;
          height: 0.2rem;
        }

        .title {
          font-size: 0.18rem;
          color: #101010;
        }

        .save {
          font-size: 0.16rem;
          color: #CECECE;
        }

      }

      .scroll {
        & {
          width: 100%;
          height: calc(100% - 0.5rem);
        }

        .content {
          & {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          .avatar-box {
            & {
              width: 88%;
              margin-top: 0.25rem;
              margin-bottom: 0.25rem;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: center;
              position: relative;
            }

            .avatar-change {
              height: 1rem;
              width: 1rem;
              border-radius: 100%;
              object-fit: cover;
            }

            .camera-box {
              & {
                position: absolute;
                left: 0.6rem;
                bottom: 0%;
                height: 0.4rem;
                width: 0.4rem;
                border-radius: 100%;
                background-color: rgba(0, 0, 0, 70%);
                display: flex;
                justify-content: center;
                align-items: center;
              }

              .camera {
                width: 0.2rem;
                height: 0.2rem;
              }
            }
          }

          .item {
            & {
              width: 88%;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
            }

            .item-title {
              font-size: 0.16rem;
              color: #6C6C6C;
            }

            .value {
              & {
                width: 75%;
                height: 0.6rem;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                font-size: 0.16rem;
                color: #101010;
                border-bottom-style: solid;
                border-bottom-color: #EFEFEF;
                border-bottom-width: 0.6px;
              }

              .enter {
                width: 0.16rem;
                height: 0.16rem;
              }

              .input-nickname {
                color: #101010;
                width: 100%;
                font-size: 0.16rem;
                border: none;
              }

              .input-sign {
                color: #101010;
                width: 100%;
                font-size: 0.16rem;
                border: none;
              }

              .input-sign::-webkit-input-placeholder {
                /* WebKit browsers */
                color: #BEBEBE;
                font-size: 0.16rem;
              }

              .input-sign:-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */
                color: #BEBEBE;
                font-size: 0.16rem;
              }

              .input-sign::-moz-placeholder {
                /* Mozilla Firefox 19+ */
                color: #BEBEBE;
                font-size: 0.16rem;
              }

              .input-sign:-ms-input-placeholder {
                /* Internet Explorer 10+ */
                color: #BEBEBE;
                font-size: 0.16rem;
              }
            }
          }
        }
      }

    }
  }

  .profile {
    & {
      display: flex;
      flex-direction: column;
      position: relative;
      width: 100%;
      height: 100%;
    }

    .userInfo {
      & {
        width: 100%;
        height: 100%;
        background-color: #FEFEFE;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #101010;
      }

      .back {
        margin-left: 4%;
        width: 0.18rem;
        height: 0.18rem;
        margin-top: 0.15rem;
        align-self: flex-start;
      }

      .avatar-editor {
        & {
          margin-top: 0.3rem;
          display: flex;
          flex-direction: row;
          width: 92%;
          align-items: center;
          justify-content: space-between;
        }

        .avatar {
          height: 0.8rem;
          width: 0.8rem;
          object-fit: cover;
          border-radius: 100%;
        }

        .btn-editor {
          width: 0.85rem;
          height: 0.3rem;
        }
      }

      .nickname {
        margin-top: 0.22rem;
        font-size: 0.18rem;
        width: 92%;
      }

      .read-record {
        margin-top: 0.15rem;
        font-size: 0.14rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        align-self: flex-start;
        margin-left: 4%;
        justify-content: space-between;
      }

      .gold {
        & {
          margin-top: 0.13rem;
          font-size: 0.14rem;
          width: 92%;
          display: flex;
          flex-direction: row;
          align-items: center;
        }

        .btn-account {
          width: 0.55rem;
          height: 0.25rem;
          margin-left: 0.2rem;
        }
      }

      .input-invite-code {
        & {
          margin-top: 0.10rem;
          width: 92%;
          display: flex;
          flex-direction: row;
          align-items: center;
        }

        .btn {
          width: 0.9rem;
          height: 0.25rem;
        }

        .span {
          margin-left: 0.15rem;
          color: #909497;
          font-size: 0.13rem;
        }
      }
    }

    .more {
      & {
        position: absolute;
        bottom: 0%;
        width: 100%;
        background-color: #FEFEFE;
        height: 56%;
        border-top-right-radius: 0.15rem;
        border-top-left-radius: 0.15rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #101010;
        font-size: 0.18rem;
        background-color: #551DC4;
      }

      .sign {
        & {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          width: 92%;
          position: absolute;
          top: 0.1rem;
        }

        .btn {
          width: 0.6rem;
          height: 0.25rem;
        }

        .rule {
          font-size: 0.14rem;
          color: #FEFEFE;
        }
      }

      .title {
        margin-top: 0.28rem;
        font-size: 0.2rem;
        font-weight: bold;
        color: #FEFEFE;
      }

      .circle1 {
        & {
          margin-top: 0.15rem;
          width: 3rem;
          height: 3rem;
          border-radius: 100%;
          background-color: rgb(255, 249, 81);
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .circle2 {
          border-radius: 100%;
          background-color: rgb(255, 136, 48);
          width: 2.9rem;
          height: 2.9rem;
        }

        .circle4 {
          border-radius: 100%;
          background-color: rgb(120, 110, 255);
          width: 2.4rem;
          height: 2.4rem;
          position: absolute;
        }

        .circle3 {
          border-radius: 100%;
          background-color: rgb(119, 29, 255);
          width: 2.8rem;
          height: 2.8rem;
          position: absolute;

          .small_circle {
            position: absolute;
            width: 0.12rem;
            height: 0.12rem;
            border-radius: 100%;
            top: 0.04rem;
            transform-origin: 50% 1.36rem;
            left: calc(50% - 0.06rem);
          }
        }

        .circle5 {
          & {
            border-radius: 100%;
            background-color: rgb(120, 110, 255);
            width: 2.2rem;
            height: 2.2rem;
            position: absolute;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .triangle {
            position: absolute;
            width: 0;
            height: 0;
            border-right: 1.1rem solid rgba(0, 0, 0, 0);
            left: 0%;
            bottom: 0%;
            transform-origin: 100% 0%;
            // transform-origin: right top;
          }

          .prize {
            & {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              position: absolute;
              width: 0.6rem;
              height: 0.6rem;
              top: 0rem;
              left: 0.705rem;
              transform-origin: calc(50% + 0.1rem) 1.08rem;
            }

            .gold {
              width: 0.26rem;
              height: 0.26rem;
            }

            .number {
              font-size: 0.08rem;
              margin-top: 0.03rem;
            }
          }

          .pointer {
            & {
              position: absolute;
              border-radius: 100%;
              background-color: #EFEFEF;
              height: 0.66rem;
              width: 0.66rem;
              display: flex;
              justify-content: center;
              align-items: center;
              transition: all 12s;
            }

            .pointer2 {
              width: 0px;
              height: 0px;
              position: absolute;
              border-top: 0.5rem solid rgba(0, 0, 0, 0);
              border-right: 0.2rem solid rgba(0, 0, 0, 0);
              border-left: 0.2rem solid rgba(0, 0, 0, 0);
              border-bottom: 0.5rem solid #EFEFEF;
              bottom: 60%;
            }

            .circle {
              position: absolute;
              border-radius: 100%;
              height: 0.60rem;
              width: 0.60rem;
              background-color: rgb(120, 110, 255);
            }

            .circle2 {
              position: absolute;
              border-radius: 100%;
              height: 0.5rem;
              width: 0.5rem;
              background-color: #AB73FF;
            }

            .circle3 {
              position: absolute;
              border-radius: 100%;
              height: 0.42rem;
              width: 0.42rem;
              background-color: #C4C0FF;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 0.15rem;
              color: #EFEFEF;
              font-weight: bold;
            }

          }

          .triangle1 {
            position: absolute;
            width: 0;
            height: 0;
            border-top: 1.05rem solid #E9E0FF;
            border-right: 1.05rem solid rgba(0, 0, 0, 0);
            left: 0%;
            top: 0%;
            transform: rotate(90deg);
          }

          .triangle2 {
            position: absolute;
            width: 0;
            height: 0;
            border-top: 1.05rem solid #E9E0FF;
            border-right: 1.05rem solid rgba(0, 0, 0, 0);
            left: 0%;
            bottom: 0%;
          }

          .triangle3 {
            position: absolute;
            width: 0;
            height: 0;
            border-top: 1.05rem solid #E9E0FF;
            border-right: 1.05rem solid rgba(0, 0, 0, 0);
            right: 0%;
            bottom: 0%;
            transform: rotateX(180deg);
          }

          .triangle4 {
            position: absolute;
            width: 0;
            height: 0;
            border-top: 1.05rem solid #E9E0FF;
            border-right: 1.05rem solid rgba(0, 0, 0, 0);
            right: 0%;
            top: 0%;
            transform: rotateZ(180deg);
          }

          .triangle5 {
            position: absolute;
            width: 0;
            height: 0;
            border-top: 1.05rem solid #7021E8;
            border-right: 1.05rem solid rgba(0, 0, 0, 0);
            left: 0%;
            top: 0%;
            transform: rotateX(180deg);
          }

          .triangle6 {
            position: absolute;
            width: 0;
            height: 0;
            border-top: 1.05rem solid #7021E8;
            border-right: 1.05rem solid rgba(0, 0, 0, 0);
            left: 0%;
            bottom: 0%;
            transform: rotateZ(180deg);
          }

          .triangle7 {
            position: absolute;
            width: 0;
            height: 0;
            border-top: 1.05rem solid #7021E8;
            border-right: 1.05rem solid rgba(0, 0, 0, 0);
            right: 0%;
            bottom: 0%;
            transform: rotate(90deg);
          }

          .triangle8 {
            position: absolute;
            width: 0;
            height: 0;
            border-top: 1.05rem solid #7021E8;
            border-right: 1.05rem solid rgba(0, 0, 0, 0);
            right: 0%;
            top: 0%;
          }
        }
      }

      .chance {
        margin-top: 0.15rem;
        font-weight: bold;
        font-size: 0.2rem;
        color: #FEFEFE;
      }

      .explain {
        & {
          width: 92%;
          display: flex;
          flex-direction: column;
          color: #FEFEFE;
          font-size: 0.14rem;
        }

        .a {
          font-size: 0.16rem;
          font-weight: bold;
          margin-bottom: 0.1rem;
        }

        span {
          margin-bottom: 0.06rem;
        }
      }
    }
  }
}
